<!-- 
    @file: 首页主体
    @auth: lizibin
 -->
<template>
  <div id="foreground">
    <div class="common-layout">
      <div id="wp" class="wp" v-if="state.effects04 === 1">
        <div class="xnkl">
          <div class="deng-box2">
            <div class="deng">
              <div class="xian"></div>
              <div class="deng-a">
                <div class="deng-b">
                  <div class="deng-t">喜</div>
                </div>
              </div>
              <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
              </div>
            </div>
          </div>
          <div class="deng-box3">
            <div class="deng">
              <div class="xian"></div>
              <div class="deng-a">
                <div class="deng-b">
                  <div class="deng-t">恭</div>
                </div>
              </div>
              <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
              </div>
            </div>
          </div>
          <div class="deng-box1">
            <div class="deng">
              <div class="xian"></div>
              <div class="deng-a">
                <div class="deng-b">
                  <div class="deng-t">财</div>
                </div>
              </div>
              <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
              </div>
            </div>
          </div>
          <div class="deng-box">
            <div class="deng">
              <div class="xian"></div>
              <div class="deng-a">
                <div class="deng-b">
                  <div class="deng-t">发</div>
                </div>
              </div>
              <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog v-model="visible" title="欢迎访问这个网站" width="700px">
        <div style="font-size: 20px">本站采用Vite+Vue3+TS开发,如您需要源码请点击下面链接!</div>
        <p style="margin: 10px 0;font-size:15px;">
          <b>更多Demo 请访问：</b
          ><a
            href="http://www.nicelzb.fun:82"
            target="_blank"
            rel="noopener noreferrer"
            >http://www.nicelzb.fun:82</a
          >
        </p>
        <p style="margin: 10px 0;font-size:15px;">
          <b>开发技术：</b><b>前端：</b>Vite+Vue3+TS、Element Plus
          &nbsp;&nbsp;&nbsp;&nbsp; <b>后端：</b>Golang
          &nbsp;&nbsp;&nbsp;&nbsp;<b>数据库：</b>Mysql 8.0
        </p>
        <p style="margin: 10px 0;font-size:15px;">
          <b>前台Gitee地址：</b
          ><a
            href="https://gitee.com/lizibin1999/vite-rewrites-bpvan"
            target="_blank"
            rel="noopener noreferrer"
            >https://gitee.com/lizibin1999/vite-rewrites-bpvan</a
          >
        </p>
        <p style="margin: 10px 0;font-size:15px;">
          <b>后台Gitee地址：</b
          ><a
            href="https://gitee.com/lizibin1999/vite-rewrites-end"
            target="_blank"
            rel="noopener noreferrer"
            >https://gitee.com/lizibin1999/vite-rewrites-end</a
          >
        </p>
        <p style="margin: 10px 0;font-size:15px;"><b>感谢大佬的点赞！！！</b></p>
      </el-dialog>
      <el-container>
        <!-- 页眉 -->
        <el-header id="my-header">
          <MenuTop></MenuTop>
        </el-header>
        <!-- 主要的 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 页尾\页脚 -->
        <el-footer class="front_footer">
          <FooterCopyright></FooterCopyright>
        </el-footer>
      </el-container>
    </div>

    <!-- Backtop 回到顶部 -->
    <BackTop></BackTop>

    <!-- 打开菜单栏固钉 -->
    <MenuRight></MenuRight>
    <Music></Music>
    <LeftCard></LeftCard>
    <rightCard></rightCard>
  </div>
</template>
<script setup lang="ts">
// 引入顶部菜单栏自定义组件
import MenuTop from "./header/Menu.vue";
// 引入页尾\页脚版权信息自定义组件
import FooterCopyright from "./footer/Copyright.vue";
// 引入回到顶部固钉自定义组件
import BackTop from "./affix/BackTop.vue";
// 引入打开菜单固钉自定义组件
import MenuRight from "./affix/Menu.vue";
import Music from "./music/Music.vue";
import LeftCard from "./leftCard/leftCard.vue";
import rightCard from "./rightCard/rightCard.vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { onMounted, onBeforeUnmount, reactive, ref } from "vue";
import { ElNotification } from "element-plus";
import { storeToRefs } from "pinia";
import { useStore } from "@/store/index";
const visible = ref(true);
const Store = useStore();
const { SystemSetup } = storeToRefs(Store);

const loadData = async () => {
  // 查询系统设置
  await Store.getSystemSetup();
  await Store.getAllArticleInfo();
  // 设置
  const { code, data } = SystemSetup.value;
  // 灯笼特效
  state.effects04 = data.effects04;
  handleEffects(data);
};

/**
 * 模块名:
 * 代码描述: 高度判断
 * 作者:lizibin
 * 创建时间:2023/01/01 11:52:51
 */
function handleScrollx() {
  let top = document.documentElement.scrollTop || document.body.scrollTop;
  const id = document.getElementById("my-header") as HTMLElement;
  if (top > 60) {
    id.style.display = "none";
  } else {
    id.style.display = "block";
  }
}

onMounted(() => {
  loadData();
  // window.addEventListener("scroll", handleScrollx, true);
});
onBeforeUnmount(() => {
  // localStorage.removeItem("ipData");
});
const state = reactive({
  baseURL: import.meta.env.VITE_HTTP,
  effects04: 0,
});

const handleEffects = (data: any) => {
  // 点击网站页面显示24字核心价值观上升的特效
  if (data.effects01 === 0) {
    // document.getElementById('rightB').style.display = 'none'
  }
  // 雪花飘落特效
  if (data.effects02 === 0) {
    // document.getElementById('canvas_sakura').style.display = 'none'
  }
  // 网页黑白
  if (data.effects03 === 1) {
    document.body.style.filter = "grayscale(1)";
  }
  // 网页背景图
  // if (data.advertising5 != '') {
  //     document.body.style.background = `url(${import.meta.env.VITE_HTTP}${data.advertising5})`
  //     document.body.style.backgroundSize = `cover`
  //     document.body.style.backgroundPosition = `center center`
  //     document.body.style.backgroundRepeat = `no-repeat`
  //     document.body.style.backgroundAttachment = `fixed`
  //     document.documentElement.style.background = `url(${import.meta.env.VITE_HTTP}${data.advertising5})`
  //     document.documentElement.style.backgroundSize = `cover`
  //     document.documentElement.style.backgroundPosition = `center center`
  //     document.documentElement.style.backgroundRepeat = `no-repeat`
  //     document.documentElement.style.backgroundAttachment = `fixed`
  // }
};
</script>
<style>
.el-dialog {
  /* background: rgba(0, 0, 0, .2) !important; */
  background: rgba(0, 0, 0, 0.2) !important;
  border: rgb(8, 255, 243) 1px solid;
  backdrop-filter: blur(3px);
}
.el-dialog__title {
  color: rgb(255, 255, 255);
  font-weight: 900;
}
.el-dialog__header {
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  box-shadow: 0 0 1.5vw rgb(97, 255, 255) inset;
  background: linear-gradient(#74ffef, #74ffef) left top,
    linear-gradient(#3deeda, #3deeda) left top,
    linear-gradient(#3deeda, #3deeda) right top,
    linear-gradient(#3deeda, #3deeda) right top;
  /* linear-gradient(#3deeda, #3deeda) left bottom,
    linear-gradient(#3deeda, #3deeda) left bottom,
    linear-gradient(#3deeda, #3deeda) right bottom,
    linear-gradient(#3deeda, #3deeda) right bottom; */
  background-repeat: no-repeat;
  background-size: 2px 20px, 20px 2px;
}
.el-dialog__body {
  padding: 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  text-align: left;
  box-shadow: 0 0 1.5vw rgb(57, 255, 255) inset;
  background: linear-gradient(#3deeda, #3deeda) left bottom,
    linear-gradient(#3deeda, #3deeda) left bottom,
    linear-gradient(#3deeda, #3deeda) right bottom,
    linear-gradient(#3deeda, #3deeda) right bottom;
  background-repeat: no-repeat;
  background-size: 2px 20px, 20px 2px;
}
</style>
<style scoped>
a {
    color: #90e4dde0;
}
/* 首页底部版权样式 */
.front_footer {
  border-top: 1px solid #ebebeb;
  background: #fff;
}

.ct2 .mn {
  width: 770px;
}

.ct2 .sd {
  width: 218px;
}

@media screen and (max-width: 768px) {
  .xnkl {
    display: none;
  }
}

.deng-box {
  position: fixed;
  top: -40px;
  right: 150px;
  z-index: 9999;
  pointer-events: none;
}

.deng-box1 {
  position: fixed;
  top: -30px;
  right: 10px;
  z-index: 9999;
  pointer-events: none;
}

.deng-box2 {
  position: fixed;
  top: -40px;
  left: 150px;
  z-index: 9999;
  pointer-events: none;
}

.deng-box3 {
  position: fixed;
  top: -30px;
  left: 10px;
  z-index: 9999;
  pointer-events: none;
}

.deng-box1 .deng,
.deng-box3 .deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.8);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 5s infinite ease-in-out;
  box-shadow: -5px 5px 30px 4px #fc903d;
}

.deng {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 50px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.8);
  border-radius: 50% 50%;
  -webkit-transform-origin: 50% -100px;
  -webkit-animation: swing 3s infinite ease-in-out;
  box-shadow: -5px 5px 50px 4px #fa6c00;
}

.deng-a {
  width: 100px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.1);
  margin: 12px 8px 8px 8px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03;
}

.deng-b {
  width: 45px;
  height: 90px;
  background: #d8000f;
  background: rgba(216, 0, 15, 0.1);
  margin: -4px 8px 8px 26px;
  border-radius: 50% 50%;
  border: 2px solid #dc8f03;
}

.xian {
  position: absolute;
  top: -20px;
  left: 60px;
  width: 2px;
  height: 20px;
  background: #dc8f03;
}

.shui-a {
  position: relative;
  width: 5px;
  height: 20px;
  margin: -5px 0 0 59px;
  -webkit-animation: swing 4s infinite ease-in-out;
  -webkit-transform-origin: 50% -45px;
  background: orange;
  border-radius: 0 0 5px 5px;
}

.shui-b {
  position: absolute;
  top: 14px;
  left: -2px;
  width: 10px;
  height: 10px;
  background: #dc8f03;
  border-radius: 50%;
}

.shui-c {
  position: absolute;
  top: 18px;
  left: -2px;
  width: 10px;
  height: 35px;
  background: orange;
  border-radius: 0 0 0 5px;
}

.deng:before {
  position: absolute;
  top: -7px;
  left: 29px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  z-index: 999;
  border-radius: 5px 5px 0 0;
  border: solid 1px #dc8f03;
  background: orange;
  background: linear-gradient(
    to right,
    #dc8f03,
    orange,
    #dc8f03,
    orange,
    #dc8f03
  );
}

.deng:after {
  position: absolute;
  bottom: -7px;
  left: 10px;
  height: 12px;
  width: 60px;
  content: " ";
  display: block;
  margin-left: 20px;
  border-radius: 0 0 5px 5px;
  border: solid 1px #dc8f03;
  background: orange;
  background: linear-gradient(
    to right,
    #dc8f03,
    orange,
    #dc8f03,
    orange,
    #dc8f03
  );
}

.deng-t {
  font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
  font-size: 3.2rem;
  color: #dc8f03;
  font-weight: 700;
  line-height: 85px;
  text-align: center;
}

.night .deng-box,
.night .deng-box1,
.night .deng-t {
  background: 0 0 !important;
}

@-moz-keyframes swing {
  0% {
    -moz-transform: rotate(-10deg);
  }

  50% {
    -moz-transform: rotate(10deg);
  }

  100% {
    -moz-transform: rotate(-10deg);
  }
}

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(-10deg);
  }

  50% {
    -webkit-transform: rotate(10deg);
  }

  100% {
    -webkit-transform: rotate(-10deg);
  }
}
</style>